<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <el-form :inline="true" class="demo-form-inline filter">
      <el-form-item label="执行日期">
        <el-date-picker
          v-model="alarmdate"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"/>
      </el-form-item>
      <!--<el-form-item label="客户名称">
        <el-select  @change="fsiteNoQueChange" v-model="listQuery.fsiteNo" clearable filterable class="filter-item" placeholder="请选择客户名称">
          <el-option
            v-for="item in getListfsiteNo"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
      </el-form-item>-->
      <el-form-item label="实验室">
        <div style="display:flex;justify-content:flex-start;align-items:center">
          <el-select style="display: inline-block" clearable filterable v-model="listQuery.fpointNo" class="filter-item" placeholder="请选择实验室">
            <el-option
              v-for="item in getListfpointNo"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
          <i class="el-icon-search selectI" @click="searchDialoglab('search')"/>
        </div>
      </el-form-item>
       <el-form-item label="设备mac">
         <el-input v-model="listQuery.fmacno" clearable class="filter-item" placeholder="请输入设备mac"/>
      </el-form-item>
      <!--<el-form-item label="">
        <el-select  @change="fsiteNoQueChange" v-model="listQuery.fsiteNo" clearable filterable class="filter-item" placeholder="请选择客户名称">
          <el-option
            v-for="item in getListfsiteNo"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
      </el-form-item>-->
      <el-form-item>
        <el-button
          round
          size="medium"
          class="filter-item"
          :style="{background:buttonColor.lookup,color:buttonColor.color}"
          @click="handleFilter"
        >查找</el-button
        >
      </el-form-item>
    </el-form>

      <el-table :height="buttonColor.clientHeight" v-loading="listLoading" :data="dataList" stripe element-loading-text="正在查询中。。。" border fit highlight-current-row :header-cell-style="tableColor">
      <!--<el-table :data="dataList" element-loading-text="正在查询中。。。" border fit highlight-current-row>-->
        <el-table-column :index="indexMethod" align="center" :width="buttonColor.line" label="序" type="index" />
        <el-table-column align="left" label="设备mac" prop="fmacno" />
        <el-table-column width="100" align="center" label="设定重量" prop="setWeight" />
        <el-table-column width="100" align="center" label="实际重量" prop="weight" />
        <el-table-column :width="buttonColor.num" align="center" label="速度" prop="gear" />
        <el-table-column :width="buttonColor.num" align="center" label="计数" prop="count" />
        <el-table-column align="left" :formatter="datetimeFormat" width="190" label="开始时间" prop="begDate" />
        <el-table-column :formatter="datetimeFormat" align="left" width="190" label="结束时间" prop="endDate" />
      </el-table>
    <br><br>
    <labDialog :searchVisiblelab.sync="searchVisiblelab" :fsiteNo.sync="labDialogFsiteNo" :tableColor="tableColor" @labDialog="labDialogValue" />
  </div>
</template>

<script>
import request from '@/utils/request'
import { getPointOptions,getListArea } from '@/api/area'
import LabDialog from '@/components/LabDialog'
import moment from 'moment'
import { tableColor, titleColor,buttonColor } from '@/filters/index'

export default {
  name: 'Index',
  components: { LabDialog },
  data() {
    return {
      listLoading: true,
      tableColor,
      titleColor,
      buttonColor,
      getListfpointNoAll: null,
      getListfpointNo: null,
      labFlag:null,
      searchVisiblelab: false,
      labDialogFsiteNo:null,
      dataList: null,
      details: {
        setWeight: null,
        weight: null,
        gear: null,
        count: null,
        begDate: null,
        endDate: null
      },
      browserUrl: './qualityEqt.png',
      alarmdate: null,
      listQuery: {
        begDate: undefined,
        endDate: undefined,
        ftakedateStart: undefined,
        ftakedateEnd: undefined,
        fpointNo: undefined,
        fsiteNo: undefined,
        fmacno: undefined,
        fequipmentbarcode: undefined
      }
    }
  },
  created() {

    if(this.$store.state.user.fsiteLevel==3){
      this.listQuery.fsiteNo = this.$store.state.user.fsiteNo;
      // 存放地点
      getListArea({ flag: 10,arg1:this.$store.state.user.fsiteNo })
        .then(response => {
          this.getListfpointNo = response.data.data.list
          this.listQuery.fpointNo = response.data.data.list[0].value
        })
        .catch(() => {
          this.getListfpointNo = []
        })
    }else{
      // 存放地点
      getListArea({ flag: 10 })
        .then(response => {
          this.getListfpointNo = response.data.data.list
        })
        .catch(() => {
          this.getListfpointNo = []
        })
    }

    // this.timer()

    this.alarmdate = [new Date(), new Date()]
    this.handleFilter()
  },
  methods: {
    parserDate(date) {
      var t = Date.parse(date)
      if (!isNaN(t)) {
        return new Date(Date.parse(date.replace(/-/g, '/')))
      }
    },
    formatDate: function(date) {
      if(typeof(date)==='object'){
        var ym
        var y = date.getFullYear()
        var m = date.getMonth() + 1
        var d = date.getDate()
        if (m < 10) {
          m = '0' + m
        }
        if (d < 10) {
          d = '0' + d
        }
        ym = '' + y + m + d
        return ym
      }else{
        return date
      }

    },
    datetimeFormat(row, column) {
      const date = row[column.property]
      if (date === undefined || date === null) {
        return ''
      }
      return moment(date).format('YYYY-MM-DD HH:mm:ss')
    },
    timer() {
      return setInterval(()=>{
        this.handleFilter()
      },1000)
    },
    handleFilter: function() {
      this.listQuery.fsiteNo = this.$store.state.user.fsiteNo
      this.listQuery.ftakedateStart = this.alarmdate == null ? null : this.formatDate(this.alarmdate[0])
      this.listQuery.ftakedateEnd = this.alarmdate == null ? null : this.formatDate(this.alarmdate[1])
      this.listLoading = true
      getQualityEqtRecords(this.listQuery)
        .then(response => {
          // this.dataList = [
          //   {fmacno: '123456789012', isOpen: 1, isAlarming: 1, state: 'w', weight: 3.2,
          //     details: [{setWeight: 3.1, actWeight: 3.2, gear: 1, count: 2, begDate: '2021.05.17 10:36:28', endDate: '2021.05.17 10:37:49'},
          //     {setWeight: 3.1, actWeight: 3.2, gear: 1, count: 2, begDate: '2021.05.17 10:36:28', endDate: '2021.05.17 10:37:49'}]},
          //   {fmacno: '123456789013', isOpen: 1, isAlarming: 0, state: 'o', weight: 2.7,
          //     details: [{setWeight: 2.8, actWeight: 2.7, gear: 1, count: 2, begDate: '2021.05.17 10:34:28', endDate: '2021.05.17 10:35:49'},
          //       {setWeight: 2.5, actWeight: 2.6, gear: 1, count: 2, begDate: '2021.05.17 10:32:28', endDate: '2021.05.17 10:33:49'}]}
          //       ]
          debugger
          this.dataList = response.data.data.list
          this.listLoading = false
          debugger
        })
        .catch(() => {
          this.dataList = []
          this.listLoading = false
        })
    },

    // 搜索地点弹出框
    searchDialoglab(value) {
      this.labFlag = value
      if(value === 'add'){
        this.labDialogFsiteNo = this.dataForm.fsiteNo
      }else{
        this.labDialogFsiteNo = this.listQuery.fsiteNo
      }
      this.searchVisiblelab = true
    },

    // 地点弹出框返回值
    labDialogValue(value){
      if(this.labFlag==='add'){
        this.dataForm.fpointNo = value.lab.fpointNo
      }else{
        this.listQuery.fpointNo = value.lab.fpointNo
      }
    },

    indexMethod(index) {
      index = index + 1
      return index
    }
  }
}
export function listQualityEqtData(query) {
  return request({
    url: '/screen/getQualityEqtDatas',
    method: 'get',
    params: query
  })
}
export function getQualityEqtRecords(query) {
  return request({
    url: '/screen/getQualityEqtRecords',
    method: 'get',
    params: query
  })
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}
</style>
